<template>
  <div class="layer-manage">
    <div
      class="layer-item"
      :class="{ active: currentLayer === 'vec' }"
      @click="switchMap('vec')"
    >
      <img
        style="width: 16px; height: 16px"
        src="@/assets/images/map/map-icon.svg"
        alt="电子地图"
      />
      <div class="layer-item-title">地图</div>
    </div>
    <div
      class="layer-item"
      :class="{ active: currentLayer === 'img' }"
      @click="switchMap('img')"
    >
      <img src="@/assets/images/map/map-icon2.svg" alt="影像地图" />
      <div class="layer-item-title">影像</div>
    </div>
    <div
      class="layer-item"
      :class="{ active: layerManageActive }"
      @click="layerManageActive = !layerManageActive"
    >
      <img src="@/assets/images/map/map-layer.svg" alt="图层管理" />
      <div class="layer-item-title">图层</div>
      <LayerPanel
        v-if="layerManageActive && map"
        ref="LayerPanelRef"
        :map="map"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue";
import LayerPanel from "./LayerPanel.vue";
import { TiandituLayer } from "@/utils/mapbox/tianditu";

const props = defineProps({
  map: {
    type: Object,
    required: true,
  },
});

const LayerPanelRef = ref(null);
const tiandituLayer = new TiandituLayer();

const data = reactive({
  currentLayer: "vec", // vec 电子地图， img 影像地图
  layerManageActive: false, // 图层管理是否打开
});

// 切换地图底图
const switchMap = (type) => {
  if (data.currentLayer === type) return;
  tiandituLayer.switchMapStyle(props.map, type);
  data.currentLayer = type;
};

// 移除所有图层
const removeAllSources = () => {
  LayerPanelRef.value?.removeAllSources();
};

const { currentLayer, layerManageActive } = toRefs(data);

defineExpose({
  removeAllSources,
});
</script>

<style scoped lang="scss">
.layer-manage {
  position: absolute;
  top: 20px;
  z-index: 1;
  border-radius: 4px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  right: 20px;
  .layer-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    background-color: #fff;
    padding: 5px 10px;
    cursor: pointer;
    &:hover {
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    }
    &.active {
      background-color: #409eff;
      color: #fff;
      img {
        position: relative;
        left: -10000px;
        filter: drop-shadow(#fff 10000px 0);
      }
    }
  }
  img {
    width: 18px;
    height: 18px;
    margin-right: 2px;
  }
}
</style>
